<!-- 分割线组件 -->
<template>
    <uiwu-popup v-model="showModel" v-if="showModel">
        <view class="popup-payment absolute bottom-0 left-0 right-0 bg-white" @tap.stop>
            <view class="header flex justify-between items-center">
                <text class="w-full text-xl text-white text-center pl-5">请选择支付方式</text>
                <icon type="cancel" :size="26" color="white" class="py-2 px-3" @click="closePayment" />
            </view>
            <Gap height="20rpx" v-if="items.price" />
            <view class="flex justify-center items-end" v-if="items.price">
                <text class="fuhao ">￥</text>
                <text class="money font-bold">{{ items.price }}</text>
            </view>
            <Gap height="100rpx" />
            <view class="flex justify-center w-full" v-if="props.isShowCoupon">
                <view class="coupons flex justify-center items-center w-94 ">
                    <image src="@/static/image/coupons.png" mode="aspectFit" class="w-8 h-8" />
                    <text class="ml-2 font-bold text-sm w-20">充值优惠券</text>
                    <text class="ml-10 text-sm tip w-36" @click="showCoupon = true;"
                        v-if="couponList.length == 0">无可用优惠券 ></text>
                    <view class="ml-10 text-sm tip w-36" @click="showCoupon = true;"
                        v-if="couponList.length > 0 && !couponId">
                        有<text class=" text-orange-500">{{ couponList.length }}</text>张优惠券可用</view>

                    <view class="ml-10 text-sm tip w-36" @click="showCoupon = true;" v-if="couponId">
                        充值满<text class=" text-orange-500">{{ getCouponText(couponId, 'use_min_price')
                            }}</text>元赠送<text class=" text-orange-500">{{ getCouponText(couponId, 'coupon_price')
                            }}</text>币
                    </view>
                </view>
            </view>
            <Gap height="50rpx" />
            <radio-group @change="changeGroup" class="flex flex-col items-center justify-center w-full">

                <!-- #ifndef APP-PLUS -->
               <label class="coupons flex justify-center items-center w-94 ">
                    <image src="@/static/image/wechat.png" mode="aspectFit" class="w-8 h-8" />
                    <text class="ml-2 font-bold text-sm w-20">微信支付</text>
                    <view class="flex justify-end w-36 ml-10">
                        <radio value="weixin" :checked="false" class="mr-4" />
                    </view>
                </label>
                <!-- #endif -->

                <!-- #ifdef APP-PLUS -->
               <!-- <label class="coupons flex justify-center items-center w-94 " v-if="alipayType != 'alipay_h5'">
                    <image src="@/static/image/wechat.png" mode="aspectFit" class="w-8 h-8" />
                    <text class="ml-2 font-bold text-sm w-20">微信支付</text>
                    <view class="flex justify-end w-36 ml-10">
                        <radio value="weixin" :checked="false" class="mr-4" />
                    </view>
                </label> -->
                <!-- <Gap height="50rpx" /> -->
                <label class="coupons flex justify-center items-center w-94 ">
                    <image src="@/static/image/alipay.png" mode="aspectFit" class="w-8 h-8" />
                    <text class="ml-2 font-bold text-sm w-20">支付宝支付</text>
                    <view class="flex justify-end w-36 ml-10">
                        <radio :value="alipayType" :checked="false" class="mr-4" />
                    </view>
                </label>
                <!-- #endif -->
            </radio-group>
            <Gap height="30rpx" />
            <view class="w-full flex justify-center">
                <view class="btns w-2/3 h-12 flex justify-center items-center text-white pb-1" @click="confirm">立即支付
                </view>
            </view>
            <Gap height="80rpx" />
        </view>
        <Coupons v-model="showCoupon" @updateCouponId="updateCouponId" :couponList="couponList"
            v-if="true === showCoupon">
        </Coupons>
    </uiwu-popup>
</template>

<script lang="ts" setup>
import { computed, inject, ref, watch } from 'vue';
import Gap from "@/components/gap.vue";
import Coupons from "@/components/coupons.vue";
import { rechargeCoupons, rechargeRecharge, uiwu } from '@/api/interface/interface';
import type { RechargeCoupons } from '@/api/type/interface';
const props = defineProps({
    isShowCoupon: {
        type: Boolean,
        default: true

    }
});
const showCoupon = ref(false);
const emits = defineEmits(['confirm', 'update:modelValue']);
const items = inject("itemInfo");
const showModel = ref<boolean>(true);
const couponList = ref<RechargeCoupons[]>([]);
const couponId = ref<string | number>(0)
const paytype = ref("");
const closePayment = () => {
    couponId.value = 0;
    emits('update:modelValue', false);
}

const changeGroup = (e: any) => {
    const { detail } = e;
    paytype.value = detail.value;
}

const updateCouponId = (e: any) => {
    couponId.value = e;
};

const getCouponText = (id: string | number, type: string) => {
    const it: any = couponList.value.filter(val => val.id == id)[0];
    return it[type] * 1
}


const getrechargeCoupons = async (): Promise<any> => {
    if (items.value.id) {
        const { data } = await rechargeCoupons({
            recharge_id: items.value.id
        })
        couponList.value = data
    }

}
getrechargeCoupons();

const alipayType = computed(() => {
    return uni.getSystemInfoSync().platform == 'ios' ? "alipay_h5" : "alipay";
});
/**
 * 充值
 */
const confirm = async (): Promise<any> => {
    if (!props.isShowCoupon) {
        console.log("props.isShowCoupon");
        emits('confirm', paytype.value)
        //closePayment()
        return
    }
    if (!paytype.value) return uiwu.toast('请选择支付方式')
    uiwu.loading('支付中...', true)
    const { data } = await rechargeRecharge({
        recharge_id: items.value.id,
        coupon_user_id: couponId.value,
        pay_type: paytype.value
    })
    //console.log(data, "confirm rechargeRecharge"); debugger
    // #ifdef APP-PLUS
    if (alipayType.value == "alipay_h5") {
        uni.setStorageSync("formHtml", data.data);
        uni.navigateTo({
            url: "/pages/recharge/alipaywap"
        })
        return;
    }
    // #endif

    if (paytype.value == 'alipay') {

        uiwu.ailpay(data.data).then((res) => {
            uiwu.hideloading()
            uiwu.toast('充值成功')
            closePayment()
        }).catch((err) => {
            uiwu.hideloading()
            uiwu.toast('支付取消')
        })
    } else {
        uiwu.wxpay(data.data).then((res) => {
            uiwu.hideloading()
            uiwu.toast('充值成功')
            closePayment()
        })
    }
}


</script>

<style scoped lang="scss">
.popup-payment {

    .header {
        background-color: rgba(35, 24, 21, 1);
    }

    .fuhao {
        font-size: 28rpx;
        line-height: 28rpx;
    }

    .money {
        font-size: 80rpx;
        line-height: 80rpx;
    }

    .coupons {
        .tip {
            color: rgba(181, 181, 182, 1);
        }
    }

    .btns {
        background-image: url("@/static/image/button.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}
</style>
